<template>
  <div class="ruoyi-ueditor">
    <textarea :id="editorId" v-model="innerValue" style="display: none;"></textarea>
  </div>
</template>

<script>
export default {
  name: 'RuoyiUEditor',
  props: {
    // 支持 v-model 双向绑定
    value: {
      type: String,
      default: ''
    },
    // 自定义配置（覆盖默认配置）
    config: {
      type: Object,
      default: () => ({})
    },
    // 编辑器唯一 ID（多实例避免冲突）
    editorId: {
      type: String,
      default: `ueditor-${Date.now()}`
    }
  },
  data() {
    return {
      innerValue: this.value,
      editorInstance: null // UEditor 实例
    }
  },
  watch: {
    // 监听外部 value 变化，同步到编辑器
    value(newVal) {
      if (newVal !== this.innerValue && this.editorInstance) {
        this.editorInstance.setContent(newVal)
        this.innerValue = newVal
      }
    }
  },
  mounted() {
    this.initUEditor()
  },
  beforeDestroy() {
    this.destroyUEditor() // 销毁实例，避免内存泄漏
  },
  methods: {
    // 初始化 UEditor
    initUEditor() {
      // 确保 UEditor 全局对象加载完成（若依异步加载静态资源）
      if (!window.UE) {
        setTimeout(() => this.initUEditor(), 100)
        return
      }

      // 合并默认配置和自定义配置
      const editorConfig = {...window.UE.config, ...this.config}

      // 创建 UEditor 实例
      this.editorInstance = window.UE.getEditor(this.editorId, editorConfig)

      // 编辑器初始化完成回调
      this.editorInstance.addListener('ready', () => {
        // 初始化内容
        this.editorInstance.setContent(this.innerValue)

        // 监听内容变化，同步到 v-model
        this.editorInstance.addListener('contentChange', () => {
          const content = this.editorInstance.getContent()
          this.innerValue = content
          this.$emit('input', content) // 触发 v-model 同步
          this.$emit('change', content) // 自定义 change 事件
        })

        // 适配若依：解决 Element UI 弹窗中编辑器无法输入的问题（聚焦问题）
        this.$nextTick(() => {
          this.editorInstance.focus()
        })
      })

      // 解决若依上传接口返回格式适配（关键：UEditor 要求特定返回格式）
      this.adaptRuoyiUpload()
    },

    // 适配若依上传接口返回格式
    adaptRuoyiUpload() {
      // UEditor 上传图片/文件时，默认期望返回格式：
      // { state: "SUCCESS", url: "图片URL", title: "文件名", original: "原文件名" }
      // 若依上传接口返回格式：{ code: 200, msg: "成功", data: "文件URL" }
      // 因此需要重写 UEditor 的上传回调适配

      // 重写图片上传回调
      window.UE.Editor.prototype._onImageUploadComplete = function (result) {
        const res = JSON.parse(result.responseText)
        if (res.code === 200) {
          this.execCommand('insertimage', {
            src: res.data,
            title: this.options.imageFieldName,
            original: res.data.split('/').pop()
          })
          this.fireEvent('insertimage')
        } else {
          this.fireEvent('uploaderror', res.msg)
          this.$message.error('图片上传失败：' + res.msg)
        }
      }

      // 重写文件上传回调（附件）
      window.UE.Editor.prototype._onFileUploadComplete = function (result) {
        const res = JSON.parse(result.responseText)
        if (res.code === 200) {
          const fileName = res.data.split('/').pop()
          this.execCommand('insertfile', {
            url: res.data,
            title: fileName,
            original: fileName
          })
        } else {
          this.$message.error('文件上传失败：' + res.msg)
        }
      }
    },

    // 销毁 UEditor 实例
    destroyUEditor() {
      if (this.editorInstance) {
        this.editorInstance.destroy()
        this.editorInstance = null
        window.UE.delEditor(this.editorId) // 移除编辑器 DOM
      }
    },

    // 外部调用：获取编辑器内容
    getContent() {
      return this.editorInstance ? this.editorInstance.getContent() : ''
    },

    // 外部调用：清空编辑器
    clearContent() {
      if (this.editorInstance) {
        this.editorInstance.setContent('')
        this.innerValue = ''
        this.$emit('input', '')
      }
    }
  }
}
</script>

<style scoped>
/* 适配若依布局，避免编辑器溢出 */
.ruoyi-ueditor {
  width: 100%;
  box-sizing: border-box;
}

/* 解决 Element UI 弹窗中编辑器工具栏被遮挡的问题 */
::v-deep .edui-editor-toolbarbox {
  z-index: 1000 !important;
}
.ruoyi-ueditor {
  width: 100% !important;
  height: auto !important;
  min-height: 500px !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 100 !important;
}

/* 1. 强制显示编辑器主容器（关键） */
::v-deep .edui-container {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  height: 100% !important;
}

/* 2. 确保工具栏和编辑区显示 */
::v-deep .edui-editor-toolbarbox {
  display: block !important;
  height: auto !important;
}

/* 3. 编辑区强制显示并设置高度 */
::v-deep .edui-editor-editable {
  display: block !important;
  min-height: 400px !important;
  background: #fff !important; /* 避免透明背景看不见 */
  border: 1px solid #ddd !important; /* 加边框方便观察 */
}

/* 4. 隐藏原生 textarea（保留，这是 UEditor 正常逻辑）
::v-deep textarea#ueditor-xxx {
  display: none !important;
} */

/* 5. 强制显示 UEditor 动态生成的容器（关键修复） */
::v-deep [id^="ueditor-"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

</style>
